<!-- 采用html5  -->
<!DOCTYPE html>
<html>

<head>

  <meta charset="UTF-8">

  <!-- 页面显示适应移动设备 -->
  <meta name="viewport" content="width=device-width,initial-scale=1,shrink-to-fit=no">


  <title>我的APP</title>
  <link rel="stylesheet" href="resources\we-vue\style.css">
  <link rel="stylesheet" href="resources\css\font-awesome.min.css">


  <style>
    /*元素选择器*/

    html {
      height: 100%;
    }

    body {

      height: 100%;
      padding: 0px;
      /*内边距*/
      margin: 0px;
      /*外边距*/
    }
    .my-swipe {
  height: 200px;
  color: #fff;
  font-size: 30px;
  text-align: center;
}

.slide1 {
  background-color: #0089dc;
  color: #fff;
}

.slide2 {
  background-color: #ffd705;
  color: #000;
}

.slide3 {
  background-color: #ff2d4b;
  color: #fff;
}
  </style>


</head>


<body>

  <!-- div ：举行区域 -->
  <div id="app">

    <wv-header :fixed="false" title="实验测试" background-color="#2196f3">
      <div class="btn-back" @click="out" slot="left">
        <i class="fa fa-mail-reply-all"></i>
      </div>
      <div class="btn-menu" slot="right">
        <i class="fa fa-user"></i> {{currUserID}}
      </div>
    </wv-header>
    <div v-if="active==1" style="height:550px;border:1px solid rgb(216, 215, 221);overflow: auto;  ">
      <wv-group>
        <wv-cell title="年龄">
          <wv-number-spinner :min="15" :max="70" slot="ft" v-model="old"></wv-number-spinner>
        </wv-cell>
      </wv-group>

      <div>
        <wv-checklist title="性别" :options="options" max='1' v-model="checkedItems"></wv-checklist>
      </div>

      <div>
        <wv-checklist title="运动量" :options="options1" max='1' v-model="checkedItems1"></wv-checklist>
      </div>

      <div>
        <wv-checklist title="衣服" :options="options2" max='1' v-model="checkedItems2"></wv-checklist>
      </div>


      <wv-checklist title="PMV热评价"></wv-checklist>


      <wv-slider v-model="tpi" :min="-3" :max="3" step="0.1" :show-value-box="false"></wv-slider>


      <wv-group title="附加评价">
        <wv-textarea placeholder="请输入文本" :rows="6" v-model="content"></wv-textarea>
      </wv-group>


      <wv-button @click="tijiao" type="primary" style="margin-top:10px;">提交</wv-button>


    </div>

    <div v-if="active==2">




      <wv-button @click="tijiao" type="primary" style="margin-top:10px;">提交</wv-button>


    </div>



    <wv-tabbar>
      <wv-tabbar-item @click="active=1" :is-on="active==1">
        <span slot="icon">
          <img class="weui-tabbar__icon" src="resources\images\work.png" slot="icon">

        </span>
        调查
      </wv-tabbar-item>


      <wv-tabbar-item @click="active=2" :is-on="active==2">
        <img class="weui-tabbar__icon" src="resources\images\my.png" slot="icon"> 我的
      </wv-tabbar-item>
    </wv-tabbar>
    </template>



  </div>

</body>
<script src="resources\js\vue.min.js"></script>
<script src="resources\js\jquery.min.js"></script>
<script src="resources\we-vue\index.js"></script>
<script src="resources\layer_mobile\layer.js"></script>
<script src="resources\js\my.js"></script>

<script>
  new Vue({
    el: '#app',

    data: {
      active: 1,//当前选中选项的编号
      content: "",
      tpi: "",
      currUserID: '',
      old: '',
      options: [
        {
          label: '男',
          value: '男'
        },
        {
          label: '女',
          value: '女'
        },
      ],
      checkedItems: [],

      options1: [
        {
          label: '躺着',
          value: '46'
        },
        {
          label: '坐着休息',
          value: '58.15'
        },
        {
          label: '站着休息',
          value: '70'
        },
        {
          label: '坐着活动',
          value: '71'
        },
        {
          label: '站着活动',
          value: '93'
        },
        {
          label: '中等活动',
          value: '165'
        },
      ],
      checkedItems1: [],

      options2: [
        {
          label: '薄（短袖）',
          value: '薄'
        },
        {
          label: '中等（长袖）',
          value: '适中'
        },
        {
          label: '厚（普通夹克）',
          value: '厚'
        }
      ],
      checkedItems2: [],
      feedback: {
        f_id: '',
        f_old: '',
        f_sex: '',
        f_sport: '',
        f_clothes: '',
        f_tpi: '',
        f_content: '',
        f_user:''
      }

    },
    methods: {

      out() {
        Dialog.confirm({
          title: '警告',
          message: '你确定要退出吗？',
          skin: 'ios',

        }).then(() => {
          window.location.href = 'index.html';
        }).catch(() => { });


      },

      tijiao() {
        if (this.checkedItems.length == 0||this.checkedItems1.length == 0||this.checkedItems.length2 == 0) {
          Toast.fail('未选择选项！');
          return;
        }

        this.feedback.f_sport = this.checkedItems1[0];
        this.feedback.f_tpi= this.tpi;
        this.feedback.f_old = this.old;
        this.feedback.f_clothes = this.checkedItems2[0];
        this.feedback.f_sex = this.checkedItems[0];
        this.feedback.f_content = this.content;
        this.feedback.f_user = this.currUserID;

        Serv.operate({
          url: '/feedback.jsp',
          data: this.feedback
        }, () => {
          Toast.success('提交成功！');

        });

      }

    },
    //该函数页面加载完成时执行        
    mounted() {

      //从服务器加载文本信息（获取帐户编号）
      Serv.loadText({ url: '/currUserID.jsp' }, (data) => {
        //参数data即为回应数据(帐户编号)
        this.currUserID = data;
      });
    }
  });
</script>


</html>